import TodoAdd from "./components/todoAdd.js";
import TodoFilter from "./components/todoFilter.js";
import TodoList from "./components/todoList.js";
const { ref, reactive } = Vue;
export default {
  name: "Todo",
  setup() {
    const schedule = reactive([
      { name: "代办", active: false },
      { name: "已办", active: false },
      { name: "未办", active: false },
    ]);
    const todos = ref([]);
    const addTodo = (todo) => todos.value.push(todo);
    const handleClick = (i) => {
      schedule[i].active = true;
    };
    return {
      todos,
      addTodo,
      schedule,
    };
  },
  components: {
    todoAdd: TodoAdd,
    TodoFilter,
    TodoList,
  },
  template: `
  <h4 style="text-align: center;">欢迎使用i todos 代办:</h4>
  <todo-add :tid="todos.length" @add-todo="addTodo"></todo-add>
  <div style="padding: 10px;color: grey;">
    <span style="margin: 5px 15px 0px 0px" @click="handleClick" v-for="(item,index) in schedule" :key="index">
      {{ item.name }}
    </span>
  </div>
  <!-- <todo-filter></todo-filter> -->
  <todo-list :todos="todos"></todo-list>
  `,
};
